<template>
  <card>
    <template v-slot:title>访问量</template>
    <template v-slot:header_num>80409</template>

    <template v-slot:chart>
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div ref="echart" id="chart" style="width: 100%; height: 100%"></div>
    </template>

    <template v-slot:footer_text>日访问量</template>
    <template v-slot:footer_num>1234</template>
  </card>
</template>



<script>
import Card from "./CardLayout";
import * as echarts from "echarts";

export default {
  components: {
    Card,
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var chartDom = this.$refs.echart;
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          show: false,
          type: "category",
          boundaryGap: false,
          data: [
            "6月2号",
            "6月3号",
            "6月4号",
            "6月5号",
            "6月6号",
            "6月7号",
            "6月8号",
          ],
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            type: "line",
            data: [26, 10, 35, 30, 19, 30, 41],
            symbol: "none", //去掉折线图中的节点
            smooth: true, //true 为平滑曲线，false为直线
            // line
            lineStyle: {
              color: "rgb(90, 90, 255)",
            },
            // area
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(55, 162, 255)",
                },
                {
                  offset: 1,
                  color: "#fff",
                },
              ]),
            },
          },
        ],
        // tips
        tooltip: {},
        // layout test
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        },
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
</style>